<script setup>
import { getInsInfo } from '@/api/index.js';
import { useRequest, useWatch } from '@/hooks';
import { getDateDiff } from '@/utils/tools.js';
import InsProTree from './components/InsProTree';
import TrusteeshipSetting from './components/TrusteeshipSetting.vue';
import MonitorArchives from './components/MonitorArchives.vue';
import BasisMaintenance from './components/BasisMaintenance.vue';

const res = ref(null);
const [formattedDiff, , run] = useRequest(getInsInfo, {
  manual: true,
});
const activeName = ref('archives');
const enterprise = ref(null);
const checkedChange = check => {
  activeName.value = 'archives';
  enterprise.value = check;
  // run({ inId: check.enterpriseCode, projectType: 'TG' });
};
const handleSuccess = data => {
  res.value = data;
  run({ inId: enterprise.value?.enterpriseCode, projectType: 'TG' });
};
</script>
<template>
  <div class="app-container u-h100 u-df-spb">
    <div class="architecture-left u-h100 u-base-fg u-mr20">
      <InsProTree @checkedChange="checkedChange" :isDefaultSelect="true" type="TG" />
    </div>
    <div class="architecture-right" style="overflow-y: hidden; height: 100%">
      <div
        class="u-base-fg u-pl20 u-mb20 u-pt20"
        :style="{ height: res?.contractType === 'SHARE' || res?.contractType === 'ENSURE' ? '110px' : '110px' }"
      >
        <el-col :span="7">
          <div class="u-df-st u-mb10">
            <img class="u-mr5" src="@/assets/images/xm01.png" />
            托管年限：{{ res?.startTime }} - {{ res?.endTime }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="u-df-st u-mb10">
            <img class="u-mr5" src="@/assets/images/xm02.png" />
            投运时间：{{ formattedDiff?.runTime ?? '-' }}
          </div>
        </el-col>
        <el-col :span="6">
          <div class="u-df-st u-mb10">
            <img class="u-mr5" src="@/assets/images/xm03.png" />
            托管能源类型：
            <span v-for="(item, index) in res?.enEnergyTypes ?? []">
              {{ index === res?.enEnergyTypes?.length - 1 ? item.energyName : item.energyName + '、' }}
            </span>
            <span v-if="res?.enEnergyTypes?.length < 1">-</span>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="u-df-st u-mb10">
            <img class="u-mr5" src="@/assets/images/xm04.png" />
            托管合同类型：
            <span v-if="res?.contractType === 'CONVENTION'">能源费用托管型</span>
            <span v-else-if="res?.contractType === 'SHARE'">节能效益分享型</span>
            <span v-else-if="res?.contractType === 'ENSURE'">节能量保证型</span>
            <span v-else>-</span>
          </div>
        </el-col>
        <el-col :span="24" class="u-sec-text">
          <div class="u-w100 u-df-st" v-show="res?.contractType === 'SHARE'">
            <div style="width: 300px">
              分享收益比例（%）：{{ res?.enProjectContractTypes?.[0]?.[0]?.valueRate ?? '-' }}
            </div>
          </div>
          <div class="u-w100 u-df-st" v-show="res?.contractType === 'ENSURE'">
            <div v-for="item in res?.enProjectContractTypes?.[0] ?? []" style="width: 300px">
              保证用{{ item.keyType }}节能{{
                item.ensureType === 'CONSERVATIONRATIO' ? '率（%' : '量（' + item.keyTypeUnit
              }}）：{{ item?.valueAmount ?? '-' }}
            </div>
          </div>
        </el-col>
      </div>
      <div class="u-base-fg" style="height: calc(100% - 130px)">
        <el-tabs v-model="activeName">
          <el-tab-pane label="项目档案" name="archives">
            <MonitorArchives v-if="activeName === 'archives'" type="TG" :enterprise="enterprise" />
          </el-tab-pane>
          <el-tab-pane label="托管设置" name="settings">
            <TrusteeshipSetting
              v-show="activeName === 'settings'"
              :enterprise="enterprise"
              @projectData="handleSuccess"
            />
          </el-tab-pane>
          <el-tab-pane label="基准维护" name="basis">
            <BasisMaintenance v-if="activeName === 'basis'" :enterprise="enterprise" :projectCode="res?.projectCode" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
::v-deep .el-tabs {
  height: 100%;
  &.el-tabs--top {
    .el-tabs__header {
      margin: 0;
    }
    .el-tabs__content {
      height: calc(100% - 35px);
      .el-tab-pane {
        height: 100%;
      }
    }
    .el-tabs__item.is-top:nth-child(2) {
      padding-left: 20px;
    }
  }
}
</style>
